<template>
  <div class="div">
    <div class="div1">
      <que :queList="queList" :butFlag="!butFlag" :items="items" @query="query"/>
    </div>
    <Tables :items="items" :list="list" :loading="loading" :high="high" @show="show" :editForm="editForm"
            :but="butFlag"/>
    <el-col :md="{span: 5, offset: 6}" :lg="{span: 4, offset: 10}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pagesize"
        :current-page="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  import Tables from '../components/Tables.vue'
  import axios from 'axios'
  import Que  from '../components/Que.vue'
  import moment from 'moment'
  import {mapState} from 'vuex'
  export default{
    name: 'Apply',
    components: {
      Que,
      Tables
    },
    data () {
      return {
        list: [],
        high: 0,
        loading: false,
        butFlag: true,
        items: [
          {
            prop: 'id',
            label: '应聘计数',
            add: false,
            table: false,
            edit: false
          },
          {
            prop: 'job',
            label: '应聘职位',
            table: true,
            edit: true,
            fixed: true,
            width: '180'
          },
          {
            prop: 'username',
            label: '姓名',
            table: true,
            edit: true,
            fixed: true
          },
          {
            prop: 'phone',
            label: '联系方式',
            table: true,
            edit: true,
            fixed: true,
            width: '200'
          },
          {
            prop: 'education',
            label: '学历',
            table: true,
            edit: true
          },
          {
            prop: 'mail',
            label: '邮箱',
            table: true,
            edit: true,
            width: '200'
          },
          {
            prop: 'sex',
            label: '性别',
            table: true,
            edit: true,
            meth: function (row, column) {
              var sex = row[column.property]
              if (sex === '0') {
                sex = '男'
              } else {
                sex = '女'
              }
              return sex
            }
          },
          {
            prop: 'state',
            label: '状态',
            table: true,
            meth: function (row, column) {
              var state = row[column.property]
              if (state === true) {
                state = '未读'
              } else {
                state = '已读'
              }
              return state
            }
          },
          {
            prop: 'applyDate',
            label: '来访时间',
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            },
            table: true,
            edit: true,
            width: '200'
          },
          {
            prop: 'filePath',
            label: '简历',
            table: false,
            edit: true
          }
        ],
        queList: [
          {
            width: '3',
            name: '应聘职位',
            prop: 'job',
            i1: '0'
          },
          {
            width: '3',
            name: '状态',
            prop: 'state',
            i3: [{
              value: true,
              label: '未读'
            },
              {
                value: false,
                label: '已读'
              }]
          },
          {
            width: '3',
            name: '开始时间',
            prop: 'start',
            i2: '0'
          },
          {
            width: '3',
            name: '结束时间',
            prop: 'end',
            i2: '0'
          }],
        page: 1,
        pagesize: 20,
        total: 0,
        job: '',
        state: '',
        start: '',
        end: '',
        editForm: {
          id: '',
          username: '',
          phone: '',
          job: '',
          sex: '',
          education: '',
          mail: '',
          filePath: '',
          applyDate: '',
          state: ''
        }
      }
    },
    mounted () {
      this.get()
      this.high = window.innerHeight - 180
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    methods: {
      handleCurrentChange (val) {
        this.page = val
        this.get()
      },
      handleSizeChange (val) {
        this.pagesize = val
        this.get()
      },
      get () {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/apply/getAll`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            job: this.job,
            state: this.state,
            start: this.start,
            end: this.end
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.total = response.data.total
            this.list = response.data.data
            this.loading = false
          } else {
            this.loading = false
            this.list = []
            this.$alert('没有相关内容', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      query (msg) {
        if (msg.start && msg.end && msg.start > msg.end) {
          this.$message.error('结束日期应大于开始日期')
        } else {
          if (msg.start === null || msg.start === undefined) {
            this.start = msg.start
          } else {
            this.start = new Date(msg.start).getTime()
          }
          if (msg.end === null || msg.end === undefined) {
            this.end = msg.end
          } else {
            this.end = new Date(msg.end).getTime()
          }
          this.job = msg.job
          this.state = msg.state
          this.page = 1
          this.get()
        }
      },
      show (msg) {
        this.editForm.phone = msg.phone
        this.editForm.job = msg.job
        this.editForm.username = msg.username
        this.editForm.sex = msg.sex
        this.editForm.id = msg.id
        this.editForm.education = msg.education
        this.editForm.mail = msg.mail
        this.editForm.filePath = msg.filePath
        this.editForm.applyDate = new Date(msg.applyDate)
      }
    }
  }
</script>
<style>
  .div1 {
    width: 100%;
    height: 50px;
    padding-top: 10px;
  }

  .el-select-dropdown__item {
    height: auto !important;
  }
</style>
